<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/toastr.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <title>订单管理</title>
    <style type="text/css">
        body {
            background: #f3f3f3;
            font-size: 14px;
        }
        .headUl{
            font-size: 14px;
        }
        .headUl li{
            width: 20%;
            color: #000;
        }
        .headUl li span{
            font-size: 14px;
        }
        .headUl li.active span{
            display: inline-block;
            position: relative;
        }
        .headUl li.active span:before{
            content: "";
            width: 100%;
            bottom: 0;
            height: 2px;
            left: 0;
            position: absolute;
            background: #ff3333;
        }
        .headUl {
            width: 100%;
            display: box;
            display: -webkit-box;
            box-sizing: border-box;
            font-size: 16px;
            height: 45px;
            background-color: #fff;
            /*overflow: hidden;*/
        }
        .aui-list-view{
            background: #f3f3f3;
            margin: 0;
        }
        .orderList li{
            margin-bottom: 15px;
            background: #fff;
        }
        .status{
            color: #9c9c9c;
        }
        .orderList li>div{
            position: relative;
            overflow: hidden;
            padding: 10px;
        }
        .orderList li>div:before{
            border-bottom: 1px solid #c8c7cc;
            -webkit-transform: scale(0.5);
            content:"";
            position: absolute;
            bottom: 0;
            right: -100%;
            left: -100%;
        }
        .orderMiddle  tapmode onclick="openToTwo('orderInfo')"p{
                                                                  color: #000;
                                                              }
        .orderFooter>span{
            display: block;
            border-radius: 5px;
            background: #ff3333;
            color: #fff;
            padding:6px 10px;
            margin-right: 15px;
        }
        .orderFooter>span:first-of-type{
            margin-right: 0;
        }

        .sharePicker{
            position: fixed;
            bottom: 0;
            -webkit-transform: translateY(160px);
            height: 160px;
            overflow-y:auto;
            -webkit-transition:  .5s;
            transition:  .5s;
            z-index: 9999;
            text-align: center;
            width: 100%;
        }
        .pickAnimate{
            -webkit-transform: translateY(00px);
        }
        .pickAnimate li:last-of-type{
            background: #f5f5f5;
        }
        .setOffer{
            background: #fff;
        }
        .weixin{
            display: inline-block;
        }
        .weixin img{
            width: 80px;
        }
        .pickAnimate ul{
            margin: 0;
        }
        .divOrderList{
            overflow: hidden;
        }
        .orderList li:last-of-type{
            margin: 0;
        }
        .downIcon{
            -webkit-transition:0.5s;
            display: inline-block;
            -webkit-transform: rotate(00deg);
            transform: rotate(00deg);
            color: #ff3333;

        }
        .turnUp{
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        .upIcon{
            -webkit-transition:0.5s;
            display: inline-block;
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
            color: #ff3333;
        }
        .turnDown{
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        .share{
            cursor: pointer
        }
    </style>
</head>
<body  onload="loaded()">
<header class="aui-bar aui-bar-nav">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title">
        订单管理
    </div>
    <ul class="headUl aui-border-t aui-border-b">
        <li class="active" data-type="1" tapmode onclick="switchChange(this)">
            <span>全部</span>
        </li>
        <li data-type="2" tapmode onclick="switchChange(this)">
            <span>待付款</span>
        </li>
        <li data-type="3" tapmode onclick="switchChange(this)">
            <span>待发货</span></span>
        </li>
        <li data-type="4" tapmode onclick="switchChange(this)">
            <span>已发货</span>
        </li>
        <li tapmode  onclick="switchChange(this)">
            <span>已完成</span>
        </li>
    </ul>
</header>
<!--<div class="scrollContain" >-->
    <div class="divOrderList">
        <div class="contain">
            <div id="scroller-pullDown">
                <span class="aui-iconfont aui-icon-refresharrow downIcon">
                </span>
                <span id="pullDown-msg" class="pull-down-msg ">下拉刷新</span>
            </div>
            <ul class="aui-list-view orderList ">
                <li>
                    <div class="orderTop">
                        订单号：20161020214587444512
                        <span class="aui-pull-right status">待付款</span>
                    </div>
                    <div class="orderMiddle"  tapmode onclick="openToTwo('orderInfo')" >
                        <p class="comName">店铺名称：<span>博伟机械有限公司1</span></p>
                        <p class="money">订单金额：<span>500.00</span></p>
                        <p class="sum">商品数量：<span>200</span></p>
                        <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                    </div>
                    <div class="orderFooter">
                        <span class="pay aui-pull-right" tapmode onclick="openToTwo('../orderComfirm')">付款</span>
                        <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                    </div>
                </li>
                <li>
                    <div class="orderTop">
                        订单号：20161020214587444512
                        <span class="aui-pull-right status">待付款</span>
                    </div>
                    <div class="orderMiddle" tapmode onclick="openToTwo('orderInfo')">
                        <p class="comName">店铺名称：<span>博伟机械有限公司</span></p>
                        <p class="money">订单金额：<span>500.00</span></p>
                        <p class="sum">商品数量：<span>200</span></p>
                        <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                    </div>
                    <div class="orderFooter">
                        <span class="pay aui-pull-right" tapmode onclick="openToTwo('../orderComfirm')">付款</span>
                        <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                    </div>
                </li>
                <li>
                    <div class="orderTop">
                        订单号：20161020214587444512
                        <span class="aui-pull-right status">待付款</span>
                    </div>
                    <div class="orderMiddle" tapmode onclick="openToTwo('orderInfo')">
                        <p class="comName">店铺名称：<span>博伟机械有限公司</span></p>
                        <p class="money">订单金额：<span>500.00</span></p>
                        <p class="sum">商品数量：<span>200</span></p>
                        <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                    </div>
                    <div class="orderFooter">
                        <span class="pay aui-pull-right" tapmode onclick="openToTwo('../orderComfirm')">付款</span>
                        <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                    </div>
                </li>
                <li>
                    <div class="orderTop">
                        订单号：20161020214587444512
                        <span class="aui-pull-right status">待发货</span>
                    </div>
                    <div class="orderMiddle" tapmode onclick="openToTwo('orderInfo')">
                        <p class="comName">店铺名称：<span>博伟机械有限公司</span></p>
                        <p class="money">订单金额：<span>500.00</span></p>
                        <p class="sum">商品数量：<span>200</span></p>
                        <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                    </div>
                    <div class="orderFooter">
                        <span class="pay aui-pull-right">提醒发货</span>
                        <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                    </div>
                </li>
                <li>
                    <div class="orderTop">
                        订单号：20161020214587444512
                        <span class="aui-pull-right status">已发货</span>
                    </div>
                    <div class="orderMiddle" tapmode onclick="openToTwo('orderInfo')">
                        <p class="comName">店铺名称：<span>博伟机械有限公司</span></p>
                        <p class="money">订单金额：<span>500.00</span></p>
                        <p class="sum">商品数量：<span>200</span></p>
                        <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                    </div>
                    <div class="orderFooter">
                        <span class="pay aui-pull-right">确认收货</span>
                        <span class="logistics aui-pull-right" tapmode onclick="openToTwo('logisticsInfo')">查看物流</span>
                        <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                    </div>
                </li>
                <li>
                    <div class="orderTop">
                        订单号：20161020214587444512
                        <span class="aui-pull-right status">已完成</span>
                    </div>
                    <div class="orderMiddle" tapmode onclick="openToTwo('orderInfo')">
                        <p class="comName">店铺名称：<span>博伟机械有限公司</span></p>
                        <p class="money">订单金额：<span>500.00</span></p>
                        <p class="sum">商品数量：<span>200</span></p>
                        <p class="time">下单时间：<span>2016-10-10 09:20</span></p>
                    </div>
                    <div class="orderFooter">
                        <span class="pay aui-pull-right"  tapmode onclick="openToTwo('../orderComfirm')">再次购买</span>
                        <span class="share aui-pull-right" tapmode onclick="share()">分享订单</span>
                    </div>
                </li>
            </ul>
            <div id="scroller-pullUp">
                <i class="aui-iconfont aui-icon-refresharrow upIcon"></i>
                <span id="pullUp-msg" class="pull-up-msg"> 上拉刷新</span>
            </div>
        </div>
    </div>
<!--</div>-->


<!-- 弹出分享 -->
<div class="sharePicker">
    <ul class="aui-list-view setOffer">
        <li class="aui-list-view-cell"  >
            <div class="weixin" tapmode onclick="shareWeChat()">
                <img src="../../image/weixin.png" >
                <p>分享到微信</p>
            </div>
            <div class="weixin" tapmode onclick="shareQQ()">
                <img src="../../image/QQ.png" >
                <p>分享到QQ</p>
            </div>
        </li>
        <li class="aui-list-view-cell "  tapmode onclick="hidePicker()">
            取消
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/index.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript" src="../../script/toastr.js"></script>
<script type="text/javascript" src="../../script/iscroll2.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
    }

    //动态加载数据后要myScroll.refresh();
    var myScroll;
    function loaded() {
        var scrollH=$("body").height()-$("header").height();
        $(".divOrderList").height(scrollH);
        setTimeout(function () {
//            延迟0.2s执行
            scroll();
        },200)
    }
    function scroll() {
        myScroll=new IScroll(".divOrderList",{
            mouseWheel:true,
            probeType:3,
            click:true
        })
        if(myScroll.maxScrollY<0){
            $("#scroller-pullUp").css({"display":"block"})
        }
        var upIcon = $(".downIcon"),
            downIcon = $(".upIcon");
        myScroll.on("scroll",function(){
            var y = this.y,
                maxY = this.maxScrollY - y,
                downHasClass = downIcon.hasClass("reverse_icon"),
                upHasClass = upIcon.hasClass("reverse_icon");
            if(y >= 40 && !downHasClass){
                $(".downIcon").addClass("turnUp");
                downIcon.addClass("reverse_icon");
                $(".pull-down-msg").text("松手刷新");
                return "";
            }else if(y < 5 && downHasClass){
                $(".downIcon").removeClass("turnUp");
                downIcon.removeClass("reverse_icon");
                $(".pull-down-msg").text("下拉刷新");
                return "";
            }

            if(maxY >= 40 && !upHasClass){
                $(".upIcon").addClass("turnDown");
                upIcon.addClass("reverse_icon");
                $(".pull-up-msg").text("松手刷新");
                return "";
            }else if(maxY < 5 && upHasClass){
                $(".upIcon").removeClass("turnDown");
                upIcon.removeClass("reverse_icon");
                $(".pull-up-msg").text("上拉刷新");
                return "";
            }
        });

        myScroll.on("slideDown",function(){
            //下拉刷新
            if(this.y > 40){
                //添加数据
                testHtml=$(".orderList").find("li").eq(0).html();
                testHtml="<li>"+testHtml+"</li>";
                $(".orderList").append(testHtml);
                myScroll.refresh();
                toastr.success("下拉数据加载成功");
            }
        });

        myScroll.on("slideUp",function(){
            //上拉刷新
            if(this.maxScrollY - this.y > 40){
                //添加数据
                testHtml=$(".orderList").find("li").eq(0).html();
                testHtml="<li>"+testHtml+"</li>";
                $(".orderList").append(testHtml);
                myScroll.refresh();
                toastr.success("上拉数据加载成功");
            }
        });

    }
    //    分类选择
    function switchChange(obj) {
        $('.headUl li').removeClass('active');
        $(obj).addClass('active');
    }
    // mui遮罩
    var mask = mui.createMask(hidePicker);

    // 关闭遮罩
    function hidePicker(){
        $(".sharePicker").removeClass("pickAnimate");
        mask.myclose();
        removeBodyLayer();
    }
    //弹出分享
    function share(){
        setBodyLayer();
        mask.show();
        $(".sharePicker").addClass("pickAnimate");
    }
    //QQ分享
    function shareQQ(){
        var qq = api.require('QQPlus');
        qq.installed(function(retInstall, errInstall) {
            if (retInstall.status) {//已安装，就登陆
                qq.login(function(retLogin, errLogin) {
                    if(retLogin.status){//登录成功
                        qq.shareNews({
                            url: 'http://sports.sina.com.cn/',
                            title: '新闻分享测试',
                            description: '新闻描述测试',
                            imgUrl: 'http://k.sinaimg.cn/n/sports/transform/20161125/bn4r-fxyawmm3366300.jpg/w570b3a.jpg'
                        },function(retShare,errShare){
                            if (retShare.status){
                                alert("分享成功！");
                            } else {
                                if(errShare.msg=="cancel"){
                                    api.toast({
                                        msg:"已取消分享"
                                    })
                                }
                            }
                        });
                    }else{//登录失败
                        api.toast({
                            msg:"QQ登录失败"
                        })
                    }
                })
            } else {
                api.toast({
                    msg:"您还没没有安装QQ"
                })
            }
        });
        hidePicker();
    }
    //微信分享
    function shareWeChat(){
        var wx = api.require('wx');
        wx.isInstalled(function(retInstall, errInstall) {
            if (retInstall.installed) {//已安装，就登陆
                wx.shareWebpage({
                    apiKey: '',
                    scene: 'timeline',
                    title: '测试标题',
                    description: '分享内容的描述',
                    thumb: 'widget://a.jpg',
                    contentUrl: 'http://sports.sina.com.cn/'
                }, function(ret, errShare) {
                    if (ret.status) {
                        api.toast({
                            msg:"分享成功"
                        })
                    } else {
                        var message;
                        switch(errShare.code){
                            case -1:
                                message="未知错误";
                                break;
                            case 1:
                                message="未知错误";
                                break;
                            case 2:
                                message="您已取消分享";
                                break;
                            case 3:
                                message="分享失败，请稍后重试";
                                break;
                            case 4:
                                message="暂时还未授权，请联系管理员";
                                break;
                            case 5:
                                message="服务暂不支持";
                                break;
                        }
                        api.toast({
                            msg:message
                        })
                    }
                });
            } else {
                api.toast({
                    msg:"您还没没有安装微信"
                })
            }
        });
        hidePicker();
    }
</script>
</html>